<template>
  <div class="login-container">
    <el-form
      :model="UserAuth"
      :rules="rules"
      status-icon
      ref="UserAuth"
      label-position="left"
      label-width="0px"
      class="demo-ruleForm login-page"
    >
      <h3 class="title">系统登录</h3>
      <el-tabs type="border-card">
        <el-tab-pane label="我是医生">
          <el-form-item prop="username">
            <el-input
              ref="username"
              v-model="UserAuth.username"
              placeholder="Username"
              name="username"
              type="text"
              tabindex="1"
              auto-complete="on"
            />
          </el-form-item>

          <el-form-item prop="password">
            <el-input
              ref="password"
              v-model="UserAuth.password"
              type="password"
              placeholder="Password"
              name="password"
              tabindex="2"
              auto-complete="on"
              @keyup.enter.native="handleDoctorLogin"
            />
          </el-form-item>

          <el-button
            :loading="loading"
            type="primary"
            style="width:100%;margin-bottom:30px;"
            @click.native.prevent="handleDoctorLogin"
          >登录
          </el-button>

          <div style="width:100%;margin-left:16%;">
            <span style="font-size:14px;">还没有账号，立即注册</span>
            <el-button
              :loading="loading"
              type="success"
              size="small"
              style="width:18%;margin-bottom:30px;margin-left:15px"
              @click.native.prevent="handleRegister"
            >注册
            </el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane label="我是管理员">
          <el-form-item prop="username">
            <el-input
              ref="username"
              v-model="UserAuth.username"
              placeholder="Username"
              name="username"
              type="text"
              tabindex="1"
              auto-complete="on"
            />
          </el-form-item>

          <el-form-item prop="password">
            <el-input
              ref="password"
              v-model="UserAuth.password"
              type="password"
              placeholder="Password"
              name="password"
              tabindex="2"
              auto-complete="on"
              @keyup.enter.native="handleAdminLogin"
            />
          </el-form-item>

          <el-button
            :loading="loading"
            type="primary"
            style="width:100%;margin-bottom:30px;"
            @click.native.prevent="handleAdminLogin"
          >登录
          </el-button>

          <div style="width:100%;margin-left:20%;visibility: hidden;">
            <span style="font-size:14px;">还没有账号，立即注册</span>
            <el-button
              :loading="loading"
              type="success"
              size="small"
              style="width:18%;margin-bottom:30px;margin-left:15px"
              @click.native.prevent="handleRegister"
            >注册
            </el-button>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      UserAuth: {
        username: "defaultAdmin",
        password: "12345678",
      },
      rules: {
        username: [{required: true, message: "请输入账号", trigger: "blur"}],
        password: [{required: true, message: "请输入密码", trigger: "blur"}],
      },
      checked: false,
    };
  },
  methods: {
    handleSubmit(event) {
      // let that = this;
      // this.$refs.UserAuth.validate((valid) => {
      //   if (valid) {
      //     // 调用接口获取token和登录信息
      //     that.$axios
      //       .login(this.UserAuth)
      //       .then(function (res) {
      //         that.globalData.token = res.data;
      //         that.$session.set("token", res.data);
      //         that.$session.set("role", that.globalData.ROLE);
      //         that.loading = true;
      //         let role = that.globalData.ROLE;
      //         if (role === "SalesAdmin") {
      //           that.$router.replace("/SalesAdminMainPage");
      //         } else if (role === "Sales") {
      //           that.$router.replace("/SalesMainPage");
      //         } else {
      //           that.$router.replace("/WareMainPage");
      //         }
      //       })
      //       .catch(function (error) {
      //         if (error.data != null) {
      //           that.$alert("登录失败! " + error.data.msg, "提示", {
      //             confirmButtonText: "OK",
      //           });
      //         } else {
      //           that.$alert("登录失败! " + "网络异常", "提示", {
      //             confirmButtonText: "OK",
      //           });
      //         }
      //       });
      //   } else {
      //     console.log("error submit!");
      //     return false;
      //   }
      // });
    },
    handleAdminLogin() {
      this.$router.replace("/Admin/AdminMainPage");
    },
    handleDoctorLogin() {
      this.$router.replace("/Doctor/DoctorMainPage");
    },
    handleRegister() {
      this.$router.replace("/register")
    }
  },
};
</script>

<style scoped>
.login-container {
  width: 100%;
  height: 100%;
}

.login-page {
  -webkit-border-radius: 5px;
  border-radius: 5px;
  margin: 180px auto;
  width: 350px;
  padding: 35px 35px 15px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}

label.el-checkbox.rememberme {
  margin: 0px 0px 15px;
  text-align: left;
}
</style>
